<template>
  <el-dialog v-model="visible" :title="`${paramsProps.title}`" :destroy-on-close="true" width="650px" draggable append-to-body>
    <el-transfer
      v-model="selectIds"
      filterable
      :filter-method="filterMethod"
      :titles="['未发送用户', '已发送用户']"
      filter-placeholder="筛选用户"
      :props="transferProps"
      :data="leaderLists"
    />
    <template #footer>
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineOptions({
  name: 'MsgUserTransfer'
});

const transferProps = {
  key: 'id',
  label: 'nickname'
};

defineProps({
  modelValue: {
    type: Array as () => number[],
    required: true
  }
});

const leaderLists = ref([]);
const selectIds = ref([]);
const emits = defineEmits<{
  'update:modelValue': [number[]];
}>();

/**
 * 过滤角色
 * @param query
 * @param item
 * @returns {boolean}
 */
const filterMethod = (query: string, item: Record<string, any>) => {
  return item.nickname.toLowerCase().includes(query.toLowerCase());
};

const visible = ref(false);
const paramsProps = ref({
  title: '',
  row: {},
  api: undefined,
  userList: []
});

// 接收父组件传过来的参数
const acceptParams = params => {
  paramsProps.value = params;
  leaderLists.value = params.userList;
  selectIds.value = params.selectIds;
  visible.value = true;
};

const handleSubmit = async () => {
  try {
    emits('update:modelValue', selectIds.value);
    visible.value = false;
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss"></style>
